<!DOCTYPE html>
<html>
<!--
Copyright 2009 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<head>
  <title>Google Earth API Samples - Entering a Photo Overlay</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <!-- You should probably remove most of this extra cruft if you're copying
       this sample! -->
  <style type="text/css">@import "static/examples.css";</style>
  <style type="text/css">@import "static/prettify/prettify.css";</style>
  <script type="text/javascript" src="static/prettify/prettify.js"></script>
  
  <!-- Change the key below to your own Maps API key -->
  <script type="text/javascript" src="http://www.google.com/jsapi?hl=en&amp;key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<!-- We'll need to walk the DOM looking for a KmlPhotoOverlay later -->
<script src="http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js" type="text/javascript"></script>
  <script type="text/javascript">
  /* <![CDATA[ */
  var ge;
  var photoOverlay = null;
  
  google.load("earth", "1");

  function init() {
    google.earth.createInstance('map3d', initCB, failureCB);
  }
  
  function initCB(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);
    
    // add a navigation control
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
    
    // add some layers
    ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
    ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

    // create the photo overlay by fetching it out of a KML file
    var href = window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/';
    href += 'static/spaceneedle_photooverlay.kml';
    
    google.earth.fetchKml(ge, href, function(kmlObject) {
      if (!kmlObject) {
        // wrap alerts in API callbacks and event handlers
        // in a setTimeout to prevent deadlock in some browsers
        setTimeout(function() {
          alert('Bad or null KML.');
        }, 0);
        return;
      }
    
      // Show the entire KML file in the plugin.
      ge.getFeatures().appendChild(kmlObject);
    
      // Walk the DOM looking for a KmlPhotoOverlay
      walkKmlDom(kmlObject, function() {
        if (this.getType() == 'KmlPhotoOverlay') {
          photoOverlay = this;
          return false; // stop the DOM walk here.
        }
      });
    });
    
    document.getElementById('installed-plugin-version').innerHTML =
      ge.getPluginVersion().toString();
  }
  
  function failureCB(errorCode) {
  }
  
  function enterPhotoOverlay() {
    if (!photoOverlay) {
      alert('No photo overlay found!');
      return;
    }
  
    ge.getPhotoOverlayViewer().setPhotoOverlay(photoOverlay);
  }
  
  function exitPhotoOverlay() {
    // just like setBalloon(null)
    ge.getPhotoOverlayViewer().setPhotoOverlay(null);
  }
  
  /* ]]> */
  </script>
</head>
<body onload="if(window.prettyPrint)prettyPrint();init();">
  <h1>Google Earth API Samples - Entering a Photo Overlay</h1>
  <dl>
            <dt>Last Modified:</dt><dd>06/08/2009</dd>
    <dt>Installed Plugin Version:</dt><dd id="installed-plugin-version">...</dd>
  </dl>
  <div style="clear: both;"></div>
  
  <div id="ui" style="position: relative;">
    <div id="map3d" style="border: 1px solid silver; width: 500px; height: 500px;"></div>

    <div id="extra-ui" style="position: absolute; left: 520px; top: 0;">
      <input type="button" onclick="enterPhotoOverlay()" value="Enter Photo Overlay"/>
      <input type="button" onclick="exitPhotoOverlay()" value="Exit Photo Overlay"/>
      
      <h2>Relevant Resources:</h2>
      <ul>
<li><a href="http://code.google.com/apis/earth/documentation/reference/interface_g_e_photo_overlay_viewer.html">GEPhotoOverlayViewer Reference</a></li>
<li><a href="http://code.google.com/apis/earth/documentation/reference/interface_kml_photo_overlay.html">KmlPhotoOverlay Reference</a></li>
<li><a href="http://code.google.com/apis/earth/documentation/reference/interface_g_e_plugin.html">GEPlugin Reference</a></li>
<a id="playground-button" href="http://code.google.com/apis/ajax/playground/?exp=earth#entering_a_photo_overlay"><img src="static/playground-button.png"/></a>      </ul>
      <h2>Relevant Code Excerpt:</h2>      <pre class="prettyprint lang-html">&lt;!-- We'll need to walk the DOM looking for a KmlPhotoOverlay later --&gt;
&lt;script src=&quot;http://earth-api-samples.googlecode.com/svn/trunk/lib/kmldomwalk.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>      <pre class="prettyprint lang-js">var photoOverlay = null;</pre>      <pre class="prettyprint lang-js">// create the photo overlay by fetching it out of a KML file
var href = window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/';
href += 'static/spaceneedle_photooverlay.kml';

google.earth.fetchKml(ge, href, function(kmlObject) {
  if (!kmlObject) {
    // wrap alerts in API callbacks and event handlers
    // in a setTimeout to prevent deadlock in some browsers
    setTimeout(function() {
      alert('Bad or null KML.');
    }, 0);
    return;
  }

  // Show the entire KML file in the plugin.
  ge.getFeatures().appendChild(kmlObject);

  // Walk the DOM looking for a KmlPhotoOverlay
  walkKmlDom(kmlObject, function() {
    if (this.getType() == 'KmlPhotoOverlay') {
      photoOverlay = this;
      return false; // stop the DOM walk here.
    }
  });
});</pre>      <pre class="prettyprint lang-js">function enterPhotoOverlay() {
  if (!photoOverlay) {
    alert('No photo overlay found!');
    return;
  }

  ge.getPhotoOverlayViewer().setPhotoOverlay(photoOverlay);
}

function exitPhotoOverlay() {
  // just like setBalloon(null)
  ge.getPhotoOverlayViewer().setPhotoOverlay(null);
}</pre>    </div>
  </div>
</body>
</html>
